<style lang="scss">
	page {
		background-color: #EEEEEE;
	}

	.header {
		background-color: #FFFFFF;
		padding: 48rpx 24rpx;

		.userinfo {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 6rpx;
			}

			.info {
				flex: 1;
				padding-left: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.username {
					color: #333333;
					font-size: 36rpx;
					line-height: 50rpx;
				}

				.integral {
					color: #999999;
					font-size: 28rpx;

					.iconfont {
						font-size: 28rpx;
						margin-right: 6rpx;
					}
				}
				.message {
					display: flex;
					flex-wrap: nowrap;
					align-items: stretch;
					font-size: 28rpx;
					color: $uni-color-warning;
					margin-top: 10rpx;
					.message-title {
						flex-grow: 1;
						padding-left: 6rpx;
						display: flex;
						align-items: center;
					}
					.iconfont {
						font-size: 28rpx;
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}

	.list-box {
		margin-top: 16rpx;
	}
</style>
<template>
	<view>
		<view class="header">
			<view class="userinfo">
				<image class="avatar" @click="updateAvator" mode="scaleToFill" :src="user.avatar | absUrl"></image>
				<view class="info" v-if="hasLogin">
					<view class="username">{{user.name}}</view>
					<view class="integral">
						欢喜找房买房真团购
					</view>
					<view v-if="notify.title" @click="toNotifyList" class="message">
						<text class="iconfont">&#xe6f5;</text>
						<text class="message-title">{{notify.title}}</text>
						<text class="iconfont">&#xe65f;</text>
					</view>
				</view>
				<view v-else class="info">
					<view class="username" @click="handlerLogin">
						立即登录
					</view>
					<view class="integral"></view>
				</view>
			</view>
		</view>

		<view class="list-box">
			<uni-list>
				<uni-list-item :thumb="'/UploadPictures/Icons/mytuan.png' | absUrl" thumbSize="sm" @click="myGroup" :clickable="true" title="我的团" showArrow="true"></uni-list-item>
				<uni-list-item :thumb="'/UploadPictures/Icons/pintuan.png' | absUrl" thumbSize="sm" @click="myJoin" :clickable="true" title="我参与的团" showArrow="true"></uni-list-item>
				<uni-list-item :thumb="'/UploadPictures/Icons/shouce.png' | absUrl" thumbSize="sm"  @click="toShouce" :clickable="true" title="使用手册" showArrow="true"></uni-list-item>
				<uni-list-item :thumb="'/UploadPictures/Icons/message.png' | absUrl" thumbSize="sm"  @click="toNotifyList" :clickable="true" title="通知消息" showArrow="true"></uni-list-item>
				<uni-list-item :thumb="'/UploadPictures/Icons/tuichu.png' | absUrl" thumbSize="sm" v-if="hasLogin" @click="logOut" :clickable="true" title="退出登录" showArrow="true"></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import appconst from "@/lib/appconst";
	import Util from "@/lib/util";
	export default {
		data() {
			return {
				notify: {}
			};
		},
		async onLoad() {
			await this.$store.dispatch('session/init');
			this.getNotify();
			setInterval(()=>{
				this.getNotify();
			},10000);
		},
		methods: {
			logOut() {
				console.log('out');
				this.$store.commit('session/logout');
			},
			handlerLogin() {
				uni.navigateTo({
					url: "../login/login"
				});
			},
			getNotify(){
				if (this.hasLogin) {
					this.$http.get('/api/services/app/Notification/GetUserFirstNotification')
					.then(res=>{
						if (res.data.result) {
							this.notify = res.data.result.notification.data;
						} else {
							this.notify = {};
						}
					});
				}
			},
			toNotifyList(){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login"
					});
					return;
				}
				uni.navigateTo({
					url: './notify-list'
				});
			},
			myGroup() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login"
					});
					return;
				}
				uni.navigateTo({
					url:"./my-group"
				});
			},
			myJoin(){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login"
					});
					return;
				}
				uni.navigateTo({
					url:"./my-join"
				});
			},
			toShouce(){
				uni.navigateTo({
					url:'../news/news-detail?id=3'
				});
			},
			updateAvator() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login"
					});
					return;
				}
				var _self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed', 'original'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						let imageUrl = res.tempFilePaths[0];
						const uploadTask = uni.uploadFile({
							url: appconst.remoteServiceBaseUrl + "/Picture/UploadPicture",
							filePath: imageUrl,
							name: 'file',
							fileType: 'image',
							formData: {
								pictureType: 'Other'
							},
							header:{
								"Authorization": "Bearer " + Util.getToken()
							},
							success: function(res) {
								console.log(res.data);
								var data = JSON.parse(res.data).result;
								// 根据自己的返回数据做相应判断,服务器返回200即代表成功请求
								if (res.statusCode == 200) {
									let avatarUrl = data.url;
									_self.$http.put('/api/services/app/User/UpdateAvatar', {
											avatar: avatarUrl
										})
										.then(res => {
											uni.showToast({
												title: '修改头像成功',
												icon: 'none'
											});
											_self.$store.commit('session/setAvatar',
											avatarUrl);
										})
								} else {
									uni.showToast({
										title: '上传头像失败',
										icon: 'none'
									})
								}
							},
							fail: function(res) {
								uni.showToast({
									title: '上传头像失败',
									icon: 'none'
								})
							}
						});
					},
					fail: function(err) {
						if (err.errMsg == 'chooseImage:fail cancel') {
							return;
						}
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			}
		},
		computed: {
			user() {
				return this.$store.state.session.user;
			},
			hasLogin() {
				return this.$store.state.session.hasLogin;
			}
		}
	}
</script>
